<template>
    <div class="hello">
        <Layout>
<!--            <Header>-->
<!--                <H2 style="color: #fff">企业分析</H2>-->
<!--            </Header>-->
            <Content style="padding: 50px; user-select: none">
                <Card>
                    <Row>
                        <i-col span="2">
                            <div>
                                <Upload
                                        :accept="'xlsx'"
                                        :show-upload-list="false"
                                        :default-file-list="fileList"
                                        :on-success="uploadSuccess"
                                        multiple
                                        action="http://localhost:8989/data/upload"
                                >
                                    <i-button icon="ios-cloud-upload-outline">上传数据文件</i-button>
                                </Upload>
                            </div>
                            <div v-if="!!cachedList.length" style="margin-top: 25px">
                                <i-button type="primary" icon="md-analytics" @click="createAnalyze">生成分析图形</i-button>
                            </div>
                            <div v-if="!!cachedList.length" style="margin-top: 25px">
                                <Tooltip content="是否对企业分类生成对比视图">
                                    对比企业分类？ <i-switch v-model="cateAnalyze" @on-change="refreshDrawing"></i-switch>
                                </Tooltip>
                            </div>
                        </i-col>
                        <i-col span="20" offset="1">
                            <div v-if="hasCountries || hasCates">
                                <h4><Icon type="md-barcode" />  筛选</h4>
                            </div>
                            <div v-if="hasCountries">
                                <h4>国家</h4>
                                <CheckboxGroup v-model="checkAllCountry" @on-change="refreshDrawing">
                                    <Checkbox
                                            v-for="(c, index) in countryList"
                                            :key="index"
                                            style="min-width: 80px"
                                            :label="c"
                                    >{{c}}
                                    </Checkbox>
                                </CheckboxGroup>
                            </div>
                            <div v-if="hasCates">
                                <h4>企业分类</h4>
                                <CheckboxGroup v-model="checkAllCate" @on-change="refreshDrawing">
                                    <Checkbox
                                            v-for="(c, index) in cateList"
                                            :key="index"
                                            style="min-width: 80px"
                                            :label="c"
                                    >{{c}}
                                    </Checkbox>
                                </CheckboxGroup>
                            </div>
                        </i-col>
                    </Row>
                    <Row style="margin-top: 25px" v-if="!!cachedList.length">
                        <i-col style="padding-left: 25px; text-align: center" span=2>
                            <h4>数据集</h4>
                            <CheckboxGroup v-model="checkAllFile">
                                <Checkbox
                                        v-for="(c, index) in cachedList"
                                        :key="index"
                                        style="min-width: 80px"
                                        :label="c"
                                >{{c}}
                                </Checkbox>
                            </CheckboxGroup>
                        </i-col>
                        <i-col span="22">
                            <div style="height: 500px" id="analyze-data-drawed-info">
                                <div v-if="showAnalyzeRes" style="height: 500px">

                                </div>
                            </div>
                        </i-col>
                    </Row>
                </Card>
            </Content>
        </Layout>
    </div>
</template>

<script>
    import axios from "axios";
    import echarts from "echarts";
    import optBuilder from '@/lib/charts';

    export default {
        name: "Analyze",
        data() {
            return {
                cachedList: [],
                fileList: [],
                cateList: [],
                countryList: [],
                checkAllCate: [],
                checkAllFile: [],
                checkAllCountry: [],
                analyzeData: [],
                chart: null,
                contryCut: 5,
                cateAnalyze: false
            };
        },
        methods: {
            uploadSuccess: function (response) {
                this.$Message.info("上传成功！");
                this.cachedList = response;
                this.fetchCates();
                this.fetchCountry();
            },
            fetchCates: function () {
                let vue = this;
                axios
                    .get("http://localhost:8989/data/cates")
                    .then(resp => {
                        vue.cateList = resp.data;
                    })
                    .catch(err => {
                        vue.$Message.error(err.status);
                    });
            },
            fetchCountry: function () {
                let vue = this;
                axios
                    .get("http://localhost:8989/data/countries")
                    .then(resp => {
                        vue.countryList = resp.data;
                    })
                    .catch(err => {
                        vue.$Message.error(err.status);
                    });
            },
            fetchCached: function () {
                let vue = this;
                axios
                    .get("http://localhost:8989/data/cached")
                    .then(resp => {
                        vue.cachedList = resp.data;
                    })
                    .catch(err => {
                        vue.$Message.error(err.status);
                    });
            },
            createAnalyze: function () {
                this.refreshDrawing()
            },
            refreshDrawing() {
                if (!this.checkAllFile.length) {
                    this.$Notice.warning({
                        title: "尚未选择数据集合",
                        desc: "请至少选择一个数据集合",
                        duration: 10
                    });
                    return;
                }

                let dataSet = this.checkAllFile;
                let cateSet = this.checkAllCate;
                let countrySet = this.checkAllCountry;
                let matchType = this.cateAnalyze? 'CATEGORY': 'COUNTRY';
                axios
                    .post("http://localhost:8989/data/analyze", {
                        dataSet: dataSet,
                        cateSet: cateSet,
                        countrySet: countrySet,
                        matchType: matchType
                    })
                    .then(resp => {
                        if(resp.data) {
                            if (resp.data.resType === 'SINGLE') {
                                let element = document.getElementById("analyze-data-drawed-info");
                                let chart = echarts.init(element);
                                this.analyzeData = resp.data.data.data;
                                let options = optBuilder.buildSingleOptions(this.analyzeData, 'bar', this.checkAllFile.join(","));
                                chart.setOption(options)
                            }else if (resp.data.resType === 'MULTI') {
                                let element = document.getElementById("analyze-data-drawed-info");
                                let chart = echarts.init(element);
                                this.analyzeData = resp.data.data;
                                this.checkAllCountry = this.analyzeData.countries;
                                this.checkAllCate = this.analyzeData.cateList;
                                let options = optBuilder.buildMultiOptions(this.analyzeData, 'line' ,'按年度统计的企业变化', matchType);
                                chart.clear();
                                chart.setOption(options)
                            }
                        }
                    })
                // .catch(err => {
                //     this.$Message.error(`发生错误：${err.message}`);
                // });
            }
        },
        mounted: function () {
            this.fetchCates();
            this.fetchCached();
            this.fetchCountry();
        },
        computed: {
            hasCates: function () {
                return !!this.cateList && !!this.cateList.length;
            },
            showAnalyzeRes() {
                return this.analyzeData.length > 0
            },
            hasCountries() {
                return !!this.countryList && !!this.countryList.length
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
